<template>
  <div class="my">
    <!-- 头部标题 -->
    <div class="header">
      <div class="htop">
        <div class="avatar" @click="$router.push('/info')">
          <img :src="userInfo.photo" alt="">
        </div>
        <div class="user">
          <div class="name">{{ userInfo.name }}</div>
          <div class="request">申请认证</div>
        </div>
        <div class="read">
          <div class="left">
            <van-icon name="orders-o" class="order" />
          </div>
          <div class="right">
            <div class="readicon">今日阅读</div>
            <div class="readtime">5分钟</div>
          </div>
        </div>
      </div>
      <div class="hbottom">
        <ul>
          <li>
            <div class="num">{{ userInfo.art_count }}</div>
            <div>动态</div>
          </li>
          <li>
            <div class="num">{{ userInfo.follow_count }}</div>
            <div>关注</div>
          </li>
          <li>
            <div class="num">{{ userInfo.fans_count }}</div>
            <div>粉丝</div>
          </li>
        </ul>
      </div>
    </div>
    <!-- 信息一区域 -->
    <div class="information01">
      <div>
        <van-icon name="star-o" class="infoicon" color="#f00" />
        <div>收藏</div>
      </div>
      <div>
        <van-icon name="underway-o" class="infoicon" color="#ff9d1d" />
        <div>历史</div>
      </div>
      <div>
        <van-icon name="edit" class="infoicon" color="#78f" />
        <div>作品</div>
      </div>
    </div>
    <!-- 信息二区域 -->
    <van-cell-group>
      <van-cell title="消息通知" is-link />
      <van-cell title="实名认证" is-link  />
      <van-cell title="用户反馈" is-link  />
      <van-cell title="小智同学" @click="$router.push('/zhi')" is-link  />
      <van-cell title="系统设置" is-link  />
    </van-cell-group>
  </div>
</template>

<script>
import { apiUserself } from '@/api/user.js'

export default {
  data () {
    return {
      userInfo: {}
    }
  },
  async created () {
    const res = await apiUserself()
    // console.log('用户自己信息：', res)
    this.userInfo = res.data
  }
}
</script>

<style lang="less" scoped>
.my{
  box-sizing: border-box;
  .header{
    height: 175px;
    background-color: #429efa;
    padding-top: 30px;
    color: #fff;

    .htop{
      display: flex;
      justify-content: space-around;
    }

    .avatar{
      margin: 0 15px 0 20px;
      img{
        width: 50px;
        height: 50px;
        border-radius: 50%;
      }
    }

    .user{
      flex: 1;
    }

    .name{
      font-size: 24px;
      margin-bottom: 8px;
    }

    .request{
      background-color: #fff;
      color: #429efa;
      width: 58px;
      height: 16px;
      text-align: center;
      line-height: 16px;
      font-size: 12px;
      border-radius: 8px;
      font-weight: 700;
    }
  }

  .read{
    display: flex;
    justify-content: space-around;
    align-items: center;
    width: 95px;
    height: 40px;
    background-color: rgba(0,0,0,.2);
    border-radius: 20px 0 0 20px;

    .order{
      font-size: 24px;
    }

    .right{
      font-size: 12px;
    }
  }

  .hbottom{
    margin-top: 40px;
    ul{
      display: flex;
      justify-content: space-around;
      text-align: center;
      font-size: 16px;
    }

    .num{
      margin-bottom: 5px;
    }
  }

  .information01{
    margin: 5px 0;
    display: flex;
    justify-content: space-around;
    height: 100px;
    align-items: center;
    text-align: center;
    font-size: 16px;

    .infoicon{
      font-size: 24px;
    }
  }
}
</style>
